<template>
  <el-dialog width="800px" :title="title" :visible.sync="dialogFormVisible">
    <div class="formCenter">
      <el-form class="flex">
        <div style="margin-right: 40px;">
          <el-form-item label="设备名称：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.deviceName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="标段：" :label-width="formLabelWidth">
            <el-select class="el_input" size="medium" v-model="dataInfo.bidSection" clearable placeholder="请选择">
              <el-option
                v-for="item in biaoduanList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="前臂长：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.forearmLength" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="后臂长：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.behindLength" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="塔壁高：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.topLength" placeholder="请输入" />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="设备型号：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.equipmentModel" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="最大载重：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.maxLoad" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="建委编号：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.committeeNumber" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="生产厂家：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.manufactor" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="产权单位：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="dataInfo.propertyUnit" placeholder="请输入" />
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" size="small" @click="confirmModifData">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import httpInterface from "../../../../util/httpInterface";
  import { mapState } from "vuex";

  export default {
    name: "AddTowerCraneInfo",
    components: {},
    data() {
      return {
        title: "添加塔吊信息",
        dialogFormVisible: false,
        formLabelWidth: "85px",
        dataInfo: {
          deviceName: "",
          equipmentModel: "",
          committeeNumber: "",
          manufactor: "",
          propertyUnit: "",
          forearmLength: "",
          behindLength: "",
          topLength: "",
          maxLoad: "",
          bidSection: ""
        },
      }
    },

    computed: {
      ...mapState(["biaoduanList"])
    },

    methods: {
      confirmModifData() {
        let { bidSection, tenantId, id } = this.dataInfo;
        if (!bidSection) return this.warningMessage("请选择标段信息");

        let _this = this;
        let params = this.dataInfo;
        if (id) {
          params.id = id;
          params.tenantId = tenantId;
        }
        let url = id == undefined ? httpInterface.URL_INSERT_CRANE : httpInterface.URL_UPDATE_CRANE;
        httpInterface.requestPost(this, url, params, (res) => {
          let data = res.data;
          if (data.success) {
            _this.dialogFormVisible = false;
            _this.$parent.onRefreshClick();
            _this.successMessage('操作成功！');
          } else {
            _this.errorMessage('操作失败！');
          }
        }, (err) => {
          _this.errorMessage('操作失败！');
        }, false)
      },

      getTowerInfo(data) {
        let _this = this;
        let params = {
          craneId: data.id
        };
        httpInterface.requestGet(this, httpInterface.URL_SELECT_BY_CRANE_ID, params, (res) => {
          let data = res.data;
          if (data.success) {
            _this.dataInfo = data.other;
          } else {
            _this.errorMessage("加载失败！");
          }
        }, (err) => {
          _this.errorMessage("加载失败！");
        })
      },

      show(data) {
        this.dialogFormVisible = true;
        if (data != null) {
          this.title = "编辑塔吊信息";
          this.getTowerInfo(data);
        } else {
          this.title = "添加塔吊信息";
          this.dataInfo = {
            deviceName: "",
            equipmentModel: "",
            committeeNumber: "",
            manufactor: "",
            propertyUnit: "",
            forearmLength: "",
            behindLength: "",
            topLength: "",
            maxLoad: ""
          };
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .formCenter {
    display: flex;
    justify-content: center;

    .el_input {
      width: 220px;
    }
  }
</style>
